<template>
    <div class="border-t border-surface-200 dark:border-surface-800">
        <div class="max-w-[102rem] mx-auto px-4">
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-8 py-12">
                <ul class="flex flex-col gap-2 mx-auto">
                    <li class="font-bold">General</li>
                    <li>
                        <NuxtLink to="/overview"><span class="text-muted-color hover:text-color transition-colors duration-200">Overview</span></NuxtLink>
                    </li>
                    <li><a href="https://github.com/primefaces/primevue-examples" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Examples</a></li>
                    <li><a href="https://github.com/primefaces/primevue/tree/master/apps/volt/volt" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Source Code</a></li>
                </ul>
                <ul class="flex flex-col gap-2 mx-auto">
                    <li class="font-bold">Community</li>
                    <li><a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Discussions</a></li>
                    <li><a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Discord</a></li>
                </ul>
                <ul class="flex flex-col gap-2 mx-auto">
                    <li class="font-bold">Add-Ons</li>
                    <li><a href="https://primevue.org/uikit" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Figma UI Kit</a></li>
                    <li><a href="https://primeblocks.org" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">PrimeBlocks</a></li>
                    <li><a href="https://primevue.org/templates" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Templates</a></li>
                </ul>
                <ul class="flex flex-col gap-2 mx-auto">
                    <li class="font-bold">Resources</li>
                    <li><a href="https://primevue.org/team" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">About Us</a></li>
                    <li><a href="https://www.primefaces.org/newsletter" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">Newsletter</a></li>
                    <li><a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">PrimeTV</a></li>
                    <li><a href="https://primefaces.org/store" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">PrimeStore</a></li>
                    <li><a href="https://twitter.com/primevue" target="_blank" rel="noopener noreferrer" class="text-muted-color hover:text-color transition-colors duration-200">X Account</a></li>
                </ul>
            </div>
            <div class="text-center border-t border-surface py-12">Built by <a href="https://primetek.com.tr" class="font-bold">PrimeTek Informatics</a></div>
        </div>
    </div>
</template>
